import React, { Component } from 'react';
import './Tabber.scss'
import { AppOutline, AppstoreOutline, TruckOutline, UserOutline } from 'antd-mobile-icons'
import { TabBar } from 'antd-mobile'
import { NavLink, withRouter } from 'react-router-dom';

// interface Props {

// }
interface State {
    activeKey: string,
    tabList: tabItem[]
}
interface tabItem {
    key: string,
    icon: any,
    name: string,
}

class Index extends Component<any, State> {
    constructor(props: any) {
        super(props);
        this.state = {
            activeKey: '/index/home',
            tabList: [
                { key: '/index/home', icon: <AppOutline />, name: '首页' },
                { key: '/index/cate', icon: <AppstoreOutline />, name: '分类' },
                { key: '/index/shopcart', icon: <TruckOutline />, name: '购物车' },
                { key: '/index/mine', icon: <UserOutline />, name: '我的' },
            ]
        }
    }
    handleClick(key: string) {
        this.setState({
            activeKey: key
        })
        this.props.history.push(key)
    }

    render() {
        return (
            <div className='tabber'>
                <TabBar activeKey={this.state.activeKey} onChange={(key) => { this.handleClick(key) }} >
                    {
                        this.state.tabList.map(item => (
                            <TabBar.Item key={item.key} icon={item.icon} title={item.name} />
                        ))
                    }
                </TabBar>
            </div>
        );
    }
}

export default withRouter(Index);